<template>
    <header @mouseleave="isShow = false">

        <div class="header-main">

            <div class="header-l">
                <h1 class="logo">
                    <img src="@/assets/img/logo.png" alt="">
                </h1>
                <ul>
                    <li v-for="item in topBar" :key="item.id" :class="item.id == currentId ? 'active' : ''"
                        @click="tobBar(item)">
                        {{ item.title }}
                    </li>

                </ul>
            </div>

            <div class="header-r">
                <div class="search">
                    <input type="text" placeholder="搜索想要的课程">
                    <el-icon color="#999" :size="20">
                        <Search />
                    </el-icon>
                </div>

                <div class="shop" @click="goCart">
                    <el-icon color="#808080" :size="23">
                        <ShoppingCart />
                    </el-icon>
                </div>
                <div class="login" v-if="!LoginIn">
                    <router-link to="/login">
                        登陆/注册
                    </router-link>
                </div>

                <!-- 登陆成功的个人信息板块 -->
                <div class="content-login-success" v-else>
                    <div style="cursor: pointer">我的课程</div>
                    <!-- 头像 -->
                    <div @mouseover="isShow = true">
                        <img class="avator" :src="userInfo.avatar" v-if="userInfo.avatar" />
                        <img v-else class="avator" src='../../assets/img/Avat62.png' />
                    </div>
                </div>

                <!-- 划过头像显示  -->
                <div class="user-info" v-if="isShow" @mouseenter="isShow = true">
                    <div class="user-info-top">
                        <div class="u-i-t-top">
                            <!-- 用户头像 -->
                            <img class="avator" :src="userInfo.avatar" alt="" v-if="userInfo.avatar" />
                            <img class="avator" src='../../assets/img/Avat62.png' v-else />
                            <div class="avator-info">
                                <p>{{ userInfo.nickName }}</p>
                            </div>
                            <div class="vip" v-if="vipInfo">
                                <div class="vipImg">
                                    <img :src="vipInfo.vipIcon" :class="vipEndtime < 0 ? 'gray' : ''">
                                </div>
                                <div class="vipName">{{ vipInfo.vipName }}</div>
                                <div class="endTime" v-if="vipInfo.isExpired === 0">{{ endTimeVip }}天到期</div>
                                <div class="endTime" v-else>已过期{{ Math.abs(endTimeVip) }}天</div>
                            </div>
                        </div>
                        <div class="u-i-i-bottom">
                            <div>
                                <router-link to="/">
                                    <div class="info-item">
                                        <img src="../../assets/img/course.png" />
                                        <p>我的课程</p>
                                    </div>
                                </router-link>
                            </div>
                            <div>
                                <router-link to="/">
                                    <div class="info-item">
                                        <img src="../../assets/img/order.png" />
                                        <p>订单中心</p>
                                    </div>
                                </router-link>
                            </div>
                            <div>
                                <router-link to="/">
                                    <div class="info-item">
                                        <img src="../../assets/img/mess.png" />
                                        <p>我的消息</p>
                                    </div>
                                </router-link>
                            </div>
                            <div>
                                <router-link to="/">
                                    <div class="info-item">
                                        <img src="../../assets/img/setting.png" />
                                        <p>个人设置</p>
                                    </div>
                                </router-link>
                            </div>
                        </div>
                    </div>
                    <div class="user-info-bottom">
                        <div class="logout" @click="outLogin">退出登录</div>
                    </div>
                </div>


            </div>

        </div>

    </header>
</template>


<script setup>
//pinia 持久化存储
import { useUserStore } from '@/store/user'

// element
import { Search, ShoppingCart } from '@element-plus/icons-vue'
import { watch } from 'vue';

//element-plus 退出登录确认框
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';

// 请求token
import { createToken } from '@/utils/api/createToken'

// 获取用户信息
import { getInfo, logout } from '../../utils/api/login';



// 路由 
let router = useRouter();


// 用户是否为登录状态
let LoginIn = ref(null);

// 用户信息
let userInfo = ref({});

// 用户vip数据
let vipInfo = ref({});

// vip到期实时时间
let endTimeVip = ref()

// 移入显示用户信息板块
let isShow = ref(false);

// 退出登录
const outLogin = () => {

    ElMessageBox.confirm('确定退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {

        logout().then(res => {
            if (res.data.meta.code == '200') {


                ElMessage.success({
                    message: '退出成功!'
                });
                // 清除token
                let useStore = useUserStore();
                useStore.clearToken();
                // 刷新页面
                router.go(0)
            }

        })

    }).catch(() => {
        ElMessage.info({
            message: '已取消'
        });
    });
}



onBeforeMount(() => {
    //获取临时token
    createToken().then(res => {

        // console.log(res.data.data.token)
        //获取临时token同时
        getInfo({
            token: res.data.data.token,
        }).then(res => {
            // 登录状态码 获取到了用户信息
            if (res.data.meta.code == '200') {
                // console.log(res.data.data.data)
                userInfo.value = res.data.data.data

                //pinia存储用户信息
                useUserStore().userInfo = res.data.data.data

                // 用户vip
                vipInfo.value = res.data.data.data.vipInfo;

                //计算会员时间戳
                let now = new Date().getTime();

                // 将来到期的时间 - 现在的时间
                let endTime = vipInfo.value.endTime - now
                endTimeVip.value = Math.floor(endTime / 1000 / 60 / 60 / 24);

                // console.log(endTime)

                // console.log(now)

                // 用户登录成功与否状态
                LoginIn.value = true;

            }

            // console.log(res)
        })

    })
})



let topBar = ref([
    { id: 1, title: '首 页', name: 'Home' },
    { id: 2, title: '课 程', name: 'Course' },
    { id: 3, title: '会 员', name: 'Vip' },
])

// 默认选中：
let currentId = ref(1)

// 样式、跳转
const tobBar = (item) => {
    // 路由
    router.push({
        name: item.name
    })


    console.log(item.id)
    // 切换class
    currentId.value = item.id

}

// 监听路由变化
watch(() => router.currentRoute.value.name, (toPath) => {
    console.log(toPath)

    if (toPath == 'Home') {
        currentId.value = 1;

    } else if (toPath == 'Course') {
        currentId.value = 2;

    } else if (toPath == 'Vip') {
        currentId.value = 3;

    }

}, { immediate: true })


// 进去购物车
const goCart = () => {
    router.push('/cart');
}


</script>

<style scoped>
header {
    width: 100%;
    height: 80px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1600);
    position: relative;
    z-index: 999;
}

.header-main {
    display: flex;
    /* 左右分开 */
    justify-content: space-between;
    align-items: center;
    width: 1000px;
    height: 80px;
    margin: 0 auto;
}

.logo {
    width: 127px;
    height: 50px;
    margin-right: 61px;
}

.login a {
    color: #808080;
    text-decoration: none;
}

.logo img {
    width: 100%;
    height: 100%;
}

.header-l {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-l ul {
    display: flex;
    height: 50px;
}

.header-l ul li {
    line-height: 50px;
    color: #808080;
    cursor: pointer;
}

.header-l ul li+li {
    margin-left: 79px;
    font-size: 16px;
}

.header-r {
    display: flex;
    align-items: center;
    margin-right: -100px;
}

.header-r .search {
    display: flex;
    align-items: center;
    padding: 0 10px;
    width: 300px;
    height: 43px;
    background: #F0F2F4;
    border-radius: 5px;
}

.header-r .search input {
    width: 270px;
    height: 43px;
    border: none;
    /* 透明 */
    background-color: transparent;
    outline: none;
}

.shop {
    cursor: pointer;
}

.header-r .shop {
    display: flex;
    align-items: center;
    margin-left: 42px;

}

.header-r .login {
    margin-left: 38px;
    text-decoration: none;
}

.active {
    position: relative;
    color: #3585FF;
    font-weight: 500;
}

.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140%;
    height: 3px;
    background: #3585FF;
    margin-left: -20%;
}

.content-login-success {
    height: 53px;
    color: #808080;
    text-align: center;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 700;
    color: #707070;
    margin-left: 20px;
}

.avator {
    height: 53px;
    width: 53px;
    cursor: pointer;
    border-radius: 50%;
}

.user-info {
    width: 200px;
    height: 194px;
    background-color: #fff;
    border: 1px solid rgba(248, 250, 252, 1);
    box-shadow: 0px 5px 15px 3px #888888;
    position: absolute;
    top: 80px;
    right: 75px;
    z-index: 999;
    display: block;
    border-radius: 10px;
}

.user-info-top {
    display: flex;
    width: 100%;
    height: 160px;
    border-bottom: 1px solid rgba(248, 250, 252, 1);
    flex-direction: column;
}

.u-i-t-top {
    display: flex;
    height: 80px;
    width: 100%;
    align-items: center;
}

.u-i-t-top img {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    cursor: pointer;
}

.avator-info {
    width: 120px;
    height: 60px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
}

/*有会员了之后高度微调*/
.avator-info p {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

.u-i-i-bottom {
    display: flex;
    height: 100px;
    width: 200px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.u-i-i-bottom a {
    text-decoration: none;
}

.info-item {
    width: 90px;
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    border-radius: 3px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.info-item img {
    width: 14px;
    height: 16px;
}

.user-info-bottom {
    position: relative;
    width: 100%;
    height: 30px;
}

.logout {
    line-height: 30px;
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #93999f;
    cursor: pointer;
}

/*vip开始*/
.vip {
    display: flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    width: 100%;
    height: 30px;
    margin-left: -105px;
    margin-top: 18px;
    font-size: 12px;
    line-height: 30px;
}

.vipImg {
    width: 15px;
    height: 15px;
    margin-right: 12px;
}

.vipImg img {
    width: 100% !important;
    height: 100% !important;
}

.vipName {
    color: #93999F;
}

.endTime {
    padding-left: 2px;
    color: #FF0000;
    position: absolute;
    top: 45px;
    left: 73px;
    font-size: 12px;
}
</style>